import mxgraph from '@/components/mxgraph/index'
import { constants } from './constants'
const {
    mxConstants
} = mxgraph


const streamsIcon = `./mxgraph/images/${constants.TYPE.streamList}.svg`
const triggerIcon = `./mxgraph/images/${constants.TYPE.triggerList}.svg`
const partitionIcon = `./mxgraph/images/partition.svg`
const sourceIcon = `./mxgraph/images/${constants.TYPE.sourceList}.svg`
const sinkIcon = `./mxgraph/images/${constants.TYPE.sinkList}.svg`
const tableIcon = `./mxgraph/images/${constants.TYPE.tableList}.svg`
const windowIcon = `./mxgraph/images/${constants.TYPE.windowList}.svg`
const aggregationIcon = `./mxgraph/images/${constants.TYPE.aggregationList}.svg`
const projectionIcon = `./mxgraph/images/${constants.TYPE.queryprojection}.svg`
const filterIcon = './mxgraph/images/alignleft.gif'
const functionQIcon = './mxgraph/images/alignright.gif'
const joinIcon = `./mxgraph/images/${constants.TYPE.queryJoin}.svg`
const patternIcon = `./mxgraph/images/${constants.TYPE.queryPattern}.svg`
const sequenceIcon = `./mxgraph/images/${constants.TYPE.querySequence}.svg`
const customfuncIcon = `./mxgraph/images/${constants.TYPE.functionList}.svg`
const windowQIcon = './mxgraph/images/workplace.png'

const style_fontSize = 12
const style_fontColor = '#666666'
const style_strokeColor = '#E4E4E4'
const style_strokeWidth = '2'
const style_fillColor = '#E9E9E9'

const IconWdith = 100
const IconHeight = 40
const IconWdithInside = 100
const IconHeightInside = 40

const sourceStyle = {
    fillColor: style_fillColor,
    fontColor: style_fontColor,
    fontSize: style_fontSize,
    strokeColor: style_strokeColor,
    absoluteArcSize: 0,
    rounded: 1,
    strokeWidth: style_strokeWidth,
    shape: mxConstants.SHAPE_LABEL,
    align: mxConstants.ALIGN_MIDDLE,
    verticalAlign: mxConstants.ALIGN_MIDDLE,
    imageAlign: mxConstants.ALIGN_LEFT,
    imageVerticalAlign: mxConstants.ALIGN_CENTER,
    verticalLabelPosition: mxConstants.ALIGN_LEFT,
    image: sourceIcon,
}
const sinkStyle = {
    fillColor: style_fillColor,
    fontColor: style_fontColor,
    fontSize: style_fontSize,
    strokeColor: style_strokeColor,
    absoluteArcSize: 0,
    rounded: 1,
    strokeWidth: style_strokeWidth,
    shape: mxConstants.SHAPE_LABEL,
    align: mxConstants.ALIGN_MIDDLE,
    verticalAlign: mxConstants.ALIGN_MIDDLE,
    imageAlign: mxConstants.ALIGN_LEFT,
    imageVerticalAlign: mxConstants.ALIGN_CENTER,
    image: sinkIcon
}
const streamStyle = {
    fillColor: style_fillColor,
    fontColor: style_fontColor,
    fontSize: style_fontSize,
    strokeColor: style_strokeColor,
    absoluteArcSize: 0,
    rounded: 1,
    strokeWidth: style_strokeWidth,
    shape: mxConstants.SHAPE_LABEL,
    align: mxConstants.ALIGN_MIDDLE,
    verticalAlign: mxConstants.ALIGN_MIDDLE,
    imageAlign: mxConstants.ALIGN_LEFT,
    imageVerticalAlign: mxConstants.ALIGN_CENTER,
    image: streamsIcon
}
const triggerStyle = {
    fillColor: style_fillColor,
    fontColor: style_fontColor,
    fontSize: style_fontSize,
    strokeColor: style_strokeColor,
    absoluteArcSize: 0,
    rounded: 1,
    strokeWidth: style_strokeWidth,
    shape: mxConstants.SHAPE_LABEL,
    align: mxConstants.ALIGN_MIDDLE,
    verticalAlign: mxConstants.ALIGN_MIDDLE,
    imageAlign: mxConstants.ALIGN_LEFT,
    imageVerticalAlign: mxConstants.ALIGN_CENTER,
    image: triggerIcon
}
const partitionStyle = {
    fillColor: style_fillColor,
    fontColor: style_fontColor,
    fontSize: style_fontSize,
    strokeColor: style_strokeColor,
    absoluteArcSize: 0,
    rounded: 1,
    strokeWidth: style_strokeWidth,
    shape: mxConstants.SHAPE_LABEL,
    align: mxConstants.ALIGN_MIDDLE,
    verticalAlign: mxConstants.ALIGN_MIDDLE,
    imageAlign: mxConstants.ALIGN_LEFT,
    imageVerticalAlign: mxConstants.ALIGN_CENTER,
    image: partitionIcon
}
const tableStyle = {
    fillColor: style_fillColor,
    fontColor: style_fontColor,
    fontSize: style_fontSize,
    strokeColor: style_strokeColor,
    absoluteArcSize: 0,
    rounded: 1,
    strokeWidth: style_strokeWidth,
    shape: mxConstants.SHAPE_LABEL,
    align: mxConstants.ALIGN_MIDDLE,
    verticalAlign: mxConstants.ALIGN_MIDDLE,
    imageAlign: mxConstants.ALIGN_LEFT,
    imageVerticalAlign: mxConstants.ALIGN_CENTER,
    image: tableIcon
}
const windowStyle = {
    fillColor: style_fillColor,
    fontColor: style_fontColor,
    fontSize: style_fontSize,
    strokeColor: style_strokeColor,
    absoluteArcSize: 0,
    rounded: 1,
    strokeWidth: style_strokeWidth,
    shape: mxConstants.SHAPE_LABEL,
    align: mxConstants.ALIGN_MIDDLE,
    verticalAlign: mxConstants.ALIGN_MIDDLE,
    imageAlign: mxConstants.ALIGN_LEFT,
    imageVerticalAlign: mxConstants.ALIGN_CENTER,
    image: windowIcon
}
const aggregationStyle = {
    fillColor: style_fillColor,
    fontColor: style_fontColor,
    fontSize: style_fontSize,
    strokeColor: style_strokeColor,
    absoluteArcSize: 0,
    rounded: 1,
    strokeWidth: style_strokeWidth,
    shape: mxConstants.SHAPE_LABEL,
    align: mxConstants.ALIGN_MIDDLE,
    verticalAlign: mxConstants.ALIGN_MIDDLE,
    imageAlign: mxConstants.ALIGN_LEFT,
    imageVerticalAlign: mxConstants.ALIGN_CENTER,
    image: aggregationIcon
}
const projectionStyle = {
    fillColor: style_fillColor,
    fontColor: style_fontColor,
    fontSize: style_fontSize,
    strokeColor: style_strokeColor,
    absoluteArcSize: 0,
    rounded: 1,
    strokeWidth: style_strokeWidth,
    shape: mxConstants.SHAPE_LABEL,
    align: mxConstants.ALIGN_MIDDLE,
    verticalAlign: mxConstants.ALIGN_MIDDLE,
    imageAlign: mxConstants.ALIGN_LEFT,
    imageVerticalAlign: mxConstants.ALIGN_CENTER,
    image: projectionIcon
}

// const filterStyle = {
//     fillColor: style_fillColor,
//     fontColor: style_fontColor,
//     fontSize: style_fontSize,
//     strokeColor: style_strokeColor,
//     absoluteArcSize: 0,
//     rounded: 1,
//     strokeWidth: style_strokeWidth,
//     shape: mxConstants.SHAPE_LABEL,
//     align: mxConstants.ALIGN_MIDDLE,
//     verticalAlign: mxConstants.ALIGN_MIDDLE,
//     imageAlign: mxConstants.ALIGN_LEFT,
//     imageVerticalAlign: mxConstants.ALIGN_CENTER,
//     image: filterIcon
// }
const windowQueryStyle = {
    fillColor: style_fillColor,
    fontColor: style_fontColor,
    fontSize: style_fontSize,
    strokeColor: style_strokeColor,
    absoluteArcSize: 0,
    rounded: 1,
    strokeWidth: style_strokeWidth,
    shape: mxConstants.SHAPE_LABEL,
    align: mxConstants.ALIGN_MIDDLE,
    verticalAlign: mxConstants.ALIGN_MIDDLE,
    imageAlign: mxConstants.ALIGN_LEFT,
    imageVerticalAlign: mxConstants.ALIGN_CENTER,
    image: windowQIcon
}
const joinStyle = {
    fillColor: style_fillColor,
    fontColor: style_fontColor,
    fontSize: style_fontSize,
    strokeColor: style_strokeColor,
    absoluteArcSize: 0,
    rounded: 1,
    strokeWidth: style_strokeWidth,
    shape: mxConstants.SHAPE_LABEL,
    align: mxConstants.ALIGN_MIDDLE,
    verticalAlign: mxConstants.ALIGN_MIDDLE,
    imageAlign: mxConstants.ALIGN_LEFT,
    imageVerticalAlign: mxConstants.ALIGN_CENTER,
    image: joinIcon
}
const patternStyle = {
    fillColor: style_fillColor,
    fontColor: style_fontColor,
    fontSize: style_fontSize,
    strokeColor: style_strokeColor,
    absoluteArcSize: 0,
    rounded: 1,
    strokeWidth: style_strokeWidth,
    shape: mxConstants.SHAPE_LABEL,
    align: mxConstants.ALIGN_MIDDLE,
    verticalAlign: mxConstants.ALIGN_MIDDLE,
    imageAlign: mxConstants.ALIGN_LEFT,
    imageVerticalAlign: mxConstants.ALIGN_CENTER,
    image: patternIcon
}
const sequenceStyle = {
    fillColor: style_fillColor,
    fontColor: style_fontColor,
    fontSize: style_fontSize,
    strokeColor: style_strokeColor,
    absoluteArcSize: 0,
    rounded: 1,
    strokeWidth: style_strokeWidth,
    shape: mxConstants.SHAPE_LABEL,
    align: mxConstants.ALIGN_MIDDLE,
    verticalAlign: mxConstants.ALIGN_MIDDLE,
    imageAlign: mxConstants.ALIGN_LEFT,
    imageVerticalAlign: mxConstants.ALIGN_CENTER,
    image: sequenceIcon
}
const functionStyle = {
    fillColor: style_fillColor,
    fontColor: style_fontColor,
    fontSize: style_fontSize,
    strokeColor: style_strokeColor,
    absoluteArcSize: 0,
    rounded: 1,
    strokeWidth: style_strokeWidth,
    shape: mxConstants.SHAPE_LABEL,
    align: mxConstants.ALIGN_RIGHT,
    verticalAlign: mxConstants.ALIGN_MIDDLE,
    imageAlign: mxConstants.ALIGN_LEFT,
    imageVerticalAlign: mxConstants.ALIGN_CENTER,
    image: customfuncIcon
}
export const functionQStyle = {
    fillColor: style_fillColor,
    fontColor: style_fontColor,
    fontSize: style_fontSize,
    strokeColor: style_strokeColor,
    absoluteArcSize: 0,
    rounded: 1,
    strokeWidth: style_strokeWidth,
    shape: mxConstants.SHAPE_LABEL,
    align: mxConstants.ALIGN_MIDDLE,
    verticalAlign: mxConstants.ALIGN_MIDDLE,
    imageAlign: mxConstants.ALIGN_LEFT,
    imageVerticalAlign: mxConstants.ALIGN_CENTER,
    image: functionQIcon
}


export const componentsData = [{
    id: 'inOutGroup',
    title: '输入/输出',
    icon: sourceIcon,
    name: 'inOutGroup',
    width: IconWdith,
    height: IconHeight,
    toolGroupName: [{
        id: 'source',
        className: 'source-drag',
        title: constants.SOURCE, //输入源
        type: constants.TYPE.sourceList,
        icon: sourceIcon,
        style: sourceStyle,
        width: IconWdithInside,
        height: IconHeightInside,
        toolGroupName: '输入/输出'
    },
    {
        id: 'sink',
        className: 'sink-drag',
        title: constants.SINK, //'输出源',
        type: constants.TYPE.sinkList,
        icon: sinkIcon,
        style: sinkStyle,
        width: IconWdithInside,
        height: IconHeightInside,
        toolGroupName: '输入/输出'
    }
    ]
},
{
    id: 'streamsGroup',
    title: '流程构件',
    icon: streamsIcon,
    name: 'streamsGroup',
    width: IconWdith,
    height: IconHeight,
    toolGroupName: [{
        id: 'stream',
        className: 'stream-drag',
        title: constants.STEAM, //传送流
        type: constants.TYPE.streamList,
        icon: streamsIcon,
        style: streamStyle,
        width: IconWdithInside,
        height: IconHeightInside,
        toolGroupName: '流程构件'
    },
    {
        id: 'trigger',
        className: 'trigger-drag',
        title: constants.TRIGGER, //'触发器',
        type: constants.TYPE.triggerList,
        icon: triggerIcon,
        style: triggerStyle,
        width: IconWdithInside,
        height: IconHeightInside,
        toolGroupName: '流程构件'
    },
    {
        id: 'partition',
        className: 'partition-drag',
        title: constants.PARTITION, //'分区',
        type: constants.TYPE.partitionList,
        icon: partitionIcon,
        style: partitionStyle,
        width: IconWdithInside,
        height: IconHeightInside,
        toolGroupName: '流程构件'
    }
    ]
},
{
    id: 'collectionsGroup',
    title: '收集器',
    icon: tableIcon,
    name: 'collectionsGroup',
    width: IconWdith,
    height: IconHeight,
    toolGroupName: [{
        id: 'table',
        className: 'table-drag',
        title: constants.TABLE, //'表格',
        type: constants.TYPE.tableList,
        icon: tableIcon,
        style: tableStyle,
        width: IconWdithInside,
        height: IconHeightInside,
        toolGroupName: '存储器'
    },
    {
        id: 'window',
        className: 'window-drag',
        title: constants.WINDOW, //'窗口',
        type: constants.TYPE.windowList,
        icon: windowIcon,
        style: windowStyle,
        width: IconWdithInside,
        height: IconHeightInside,
        toolGroupName: '存储器'
    },
    {
        id: 'aggregation',
        className: 'aggregation-drag',
        title: constants.AGGREGATION, //'聚合',
        type: constants.TYPE.aggregationList,
        icon: aggregationIcon,
        style: aggregationStyle,
        width: IconWdithInside,
        height: IconHeightInside,
        toolGroupName: '存储器'
    }
    ]
},
{
    id: 'queryGroup',
    title: '查询',
    icon: projectionIcon,
    name: 'queryGroup',
    width: IconWdith,
    height: IconHeight,
    toolGroupName: [{
        id: 'projection-query',
        className: 'projection-query-drag',
        title: constants.PROJECTION_QUERY, //'投影',
        type: constants.TYPE.queryprojection,
        icon: projectionIcon,
        style: projectionStyle,
        width: IconWdithInside,
        height: IconHeightInside,
        toolGroupName: '查询'
    },
    // {
    //     id: 'filter-query',
    //     className: 'filter-query-drag',
    //     title: constants.FILTER_QUERY, //'过滤',
    //     type: constants.TYPE.queryprojection, //过滤的类型待确定
    //     icon: filterIcon,
    //     style: filterStyle,
    //     width: IconWdithInside,
    //     height: IconHeightInside,
    //     toolGroupName: '查询'
    // },
    // {
    //   id: 'window-query',
    //   className: 'window-query-drag',
    //   title: constants.WINDOW_QUERY,//'查询窗口',
    //   type:constants.TYPE.windowList,//查询窗口的类型待确定
    //   icon: windowQIcon,
    //   style:windowQueryStyle,
    //   width: IconWdithInside,
    //   height: IconHeightInside,
    //   toolGroupName: '查询'
    // },
    // {
    //   id: 'function-query',
    //   className: 'function-query-drag',
    //   title: constants.FUNCTION_QUERY,//'查询函数',
    //   type:constants.TYPE.queryprojection,//查询函数的类型待确定
    //   icon: functionQIcon,
    //   style:functionQStyle,
    //   width: IconWdithInside,
    //   height: IconHeightInside,
    //   toolGroupName: '查询'
    // },
    {
        id: 'join-query',
        className: 'join-query-drag',
        title: constants.JOIN_QUERY,//'连接',
        type: constants.TYPE.queryJoin,
        icon: joinIcon,
        style: joinStyle,
        width: IconWdithInside,
        height: IconHeightInside,
        toolGroupName: '查询'
    },
    {
        id: 'pattern-query',
        className: 'pattern-query-drag',
        title: constants.PATTERN_QUERY, //'模式',
        type: constants.TYPE.queryPattern,
        icon: patternIcon,
        style: patternStyle,
        width: IconWdithInside,
        height: IconHeightInside,
        toolGroupName: '查询'
    },
    {
        id: 'sequence-query',
        className: 'sequence-query-drag',
        title: constants.SEQUENCE_QUERY, //'序列',
        type: constants.TYPE.querySequence,
        icon: sequenceIcon,
        style: sequenceStyle,
        width: IconWdithInside,
        height: IconHeightInside,
        toolGroupName: '查询'
    }
    ]
},
{
    id: 'functionGroup',
    title: '自定义配置',
    icon: '/editor/images/streams.svg',
    name: 'functionGroup',
    width: IconWdith,
    height: IconHeight,
    toolGroupName: [{
        id: 'function',
        className: 'function-drag',
        title: constants.FUNCTION, //'函数',
        type: constants.TYPE.functionList,
        icon: customfuncIcon,
        style: functionStyle,
        width: IconWdithInside,
        height: IconHeightInside,
        toolGroupName: '自定义配置'
    }]
}
]
